<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">



    <title>智能制造数据可视化系统</title>
    <script type="text/javascript" src="/js/staticResources/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/staticResources/js/echarts.js"></script>
    <script type="text/javascript" src="/js/staticResources/js/echarts.min.js"></script>
    <script type="text/javascript" src="/js/staticResources/js/dark.js"></script>
    <script type="text/javascript" src="/js/staticResources/js/mqttws31.min.js"></script>



    <style>

        /* html, body {
            width: 100%;
        } */
        /* .container,.container1,.container2{ float:left}  没有用*/
        .box {

        //border-style: groove;
            border-radius: 15px;


            text-align: center;

        }

        #boxclass1 {
            position: absolute;
            height: 99%;
            width: 30%;
            left:15%;
            top:10%;
            border-radius: 15px;
        //border-style: groove;
            text-align:center;
        }
        #boxclass2 {
            position: absolute;
            height: 99%;
            width: 30%;
            right:15%;
            top:10%;
            border-radius: 15px;
        //	border-style: groove;
            text-align:center;

        }
        #boxclass3 {
            position: absolute;
            height: 99%;
            width: 38%;
            left:31%;
            top:0px;
            border-radius: 15px;
        // 	border-style: groove;
            text-align:center;
        }

        #box1 {
            /* 	top:-30px;
                position: relative;
                left:7.5%;
                height:80%;
                width: 25%; */
            float:left;
            width:25%;
        }
        #box2{
            /* top:-40px;
                position: relative;
                left:7.5%;
                height:80%;
                width: 25%; */
            float:left;
            width:25%;
        }

        #box5{


            border-radius: 15px;
            width: 100%;
            height: 49%;
            float:right;
            top:0px;
            right:0px;
            clear: right;

        }


        #box6{
            position: relative;

            width: 100%;
            float:right;
            height: 49%;
            clear: right;
        }




        #box3 {
            float:left;
            width:25%;
            /* 	position: relative;
                left:3%;
                top:15%;
                height:80%;
                width: 25%;
                 */
        }
        #box4 {
            width:25%;
            float:left;
            /* 	position: relative;
                left:3%;
                top:15%;
                height:80%;
                width: 25%;
                 */
        }


        #TopTitle {


            position: relative;
            border-radius: 15px;
            height: 4%;
            width: 100%;
            text-align:center;


        }




    </style>
    <!--

    以下是用来的进行里面的每个input进行格式 调整到的css
    -->
    <style type="text/css">
        a {
            /* 	text-decoration: none; */
            font-size:1.8em;;
            /* 	color: #000;
                color:#33FFFF; */
        }

        body {
            font-family: Arial, Sans-Serif;
            font-size: 0.85em;
            overflow-x: hidden;
            overflow-y: auto;
        }

        img {
            border: none;
        }

        ul, ul li {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        ul li.first {
            border-top: 0px solid #DFDFDF;
        }

        ul p {
            float: left;
            margin: 0;
            width: 63%;
        }

        ul h3 {
            float: left;
            font-size: 15px;
            font-weight: bold;
            margin: 12px 0 0 0;
            width: 35%; /* 这个是控制左边相距编边界的距离 */
            margin-left: 1%;
            background:	#C0C0C0;
        }
        ul h4 {
            float: left;
            font-size: 15px;
            font-weight: bold;
            margin: 12px 0 0 0;
            width: 35%; /* 这个是控制左边相距编边界的距离 */
            margin-left: 1%;
        }
        ul li {
            padding: 0.1% 0;
            width: 100%;
            overflow: hidden;
        }

        ul input {
            width: 75%; /* 这个是控制input的大小的 */
            padding: 20px;
            margin:3%;
            height:30px;
            position: relative;
            border: solid 1px #00FFFF;
            box-sizing: border-box;
            text-align: center;
            font-size: 100%;
            border: 1px solid #c8cccf;
            /* color:#6a6f77; */
            -web-kit-appearance: none;
            -moz-appearance: none;
            display: block;
            outline: 0;
            padding: 0 0em;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
        }

        ul input.required {
            border: solid 1px #f00;
        }

        #panelName {
            font-weight: bold;
        }

        .test02 {
            text-align: center;
        }
        #content{
            position:relative;
            top:8%;
        }
        img{
            height: 100px;
            width: auto;
        }

    </style>
</head>
<body >

<div id="boxclass3">

    <div class="title" id="TopTitle"><h1><strong>机床实时状态显示</strong></h1></div>
    <div id="start" style="height:20px; width: 100%;text-align: center" ></div>
</div>
<div id="content">
    <div class="box" id="box3"  >
        <img src="/images/new_machine.jpg"><img>
        <ul>

            <li>
                <tr>
                    <td><h3>机床编号</h3></td>
                    <td><p><input type="text" value="A1" id="machineId1" name="machineId1" /></p></td></tr>
            </li>

            <li>
                <h4>x轴位置</h4>
                <p><input type="text"  id="machineType1" name="machineType1" /></p>
            </li>

            <li>
                <h3>y轴位置</h3>
                <p><input type="text" value="" id="xPosition1" name="xPosition1" /></p>
            </li>
            <li>
                <h4>z轴位置</h4>
                <p><input type="text" value="" id="yPosition1" name="yPosition1" /></p>
            </li>

            <li >
                <h3>x轴电流</h3>
                <p><input type="text" value="" id="zPosition1" name="zPosition1" /></p>
            </li>

            <li>
                <h4>y轴电流</h4>
                <p><input type="text" value="" id="actFeedrate1" name="actFeedrate1" /></p>
            </li>

            <li>
                <h3>z轴电流</h3>
                <p><input type="text" value="" id="cmdFeedrate1" name="cmdFeedrate1" /></p>
            </li>

            <li>
                <h4>进给倍率</h4>
                <p><input type="text" value="" id="actSpeed1" name="actSpeed1" /></p>
            </li>

            <li>
                <h3>进给速度</h3>
                <p><input type="text" value="" id="cmdSpeed1" name="cmdSpeed1" /></p>
            </li>
            <li>
                <h4>主轴倍率</h4>
                <p><input type="text" value="" id="pro1" name="pro1" /></p>
            </li>
            <li>
                <h3>加工件数</h3>
                <p><input type="text" value="" id="proRow1" name="proRow1" /></p>
            </li>
            <li>
                <h4>主程序名</h4>
                <p><input type="text" value="" id="electric1" name="electric1" /></p>
            </li>
            <li>
                <h3>子程序名</h3>
                <p><input type="text" value="" id="alarm1" name="alarm1" /></p>
            </li>
            <li>
                <h4>指令行号</h4>
                <p><input type="text" value="" id="count1" name="count1" /></p>
            </li>
            <li>
                <h3>报警</h3>
                <p><input type="text" value="" id="leftTogo1" name="leftTogo1" /></p>
            </li>

        </ul>
    </div>
    <div class="box" id="box4">
        <img src="/images/new_machine.jpg"><img>
        <ul>

            <li>
                <tr>
                    <td><h3>机床编号</h3></td>
                    <td><p><input type="text" value="A2" id="machineId2" name="machineId2" /></p></td></tr>
            </li>

            <li>
                <h4>x轴位置</h4>
                <p><input type="text"  id="machineType2" name="machineType2" /></p>
            </li>

            <li>
                <h3>y轴位置</h3>
                <p><input type="text" value="" id="xPosition2" name="xPosition2" /></p>
            </li>
            <li>
                <h4>z轴位置</h4>
                <p><input type="text" value="" id="yPosition2" name="yPosition2" /></p>
            </li>

            <li >
                <h3>x轴电流</h3>
                <p><input type="text" value="" id="zPosition2" name="zPosition2" /></p>
            </li>

            <li>
                <h4>y轴电流</h4>
                <p><input type="text" value="" id="actFeedrate2" name="actFeedrate2" /></p>
            </li>

            <li>
                <h3>z轴电流</h3>
                <p><input type="text" value="" id="cmdFeedrate2" name="cmdFeedrate2" /></p>
            </li>

            <li>
                <h4>进给倍率</h4>
                <p><input type="text" value="" id="actSpeed2" name="actSpeed2" /></p>
            </li>

            <li>
                <h3>进给速度</h3>
                <p><input type="text" value="" id="cmdSpeed2" name="cmdSpeed2" /></p>
            </li>
            <li>
                <h4>主轴倍率</h4>
                <p><input type="text" value="" id="pro2" name="pro2" /></p>
            </li>
            <li>
                <h3>加工件数</h3>
                <p><input type="text" value="" id="proRow2" name="proRow2" /></p>
            </li>
            <li>
                <h4>主程序名</h4>
                <p><input type="text" value="" id="electric2" name="electric2" /></p>
            </li>
            <li>
                <h3>子程序名</h3>
                <p><input type="text" value="" id="alarm2" name="alarm2" /></p>
            </li>
            <li>
                <h4>指令行号</h4>
                <p><input type="text" value="" id="count2" name="count2" /></p>
            </li>
            <li>
                <h3>报警</h3>
                <p><input type="text" value="" id="leftTogo2" name="leftTogo2" /></p>
            </li>


        </ul>
    </div>
    <div class="box" id="box1"  >
        <img src="/images/new_machine.jpg"><img>
        <ul>

            <li>
                <tr>
                    <td><h3>机床编号</h3></td>
                    <td><p><input type="text" value="A3" id="machineId3" name="machineId3" /></p></td></tr>
            </li>

            <li>
                <h4>x轴位置</h4>
                <p><input type="text"  id="machineType3" name="machineType3" /></p>
            </li>

            <li>
                <h3>y轴位置</h3>
                <p><input type="text" value="" id="xPosition3" name="xPosition3" /></p>
            </li>
            <li>
                <h4>z轴位置</h4>
                <p><input type="text" value="" id="yPosition3" name="yPosition3" /></p>
            </li>

            <li >
                <h3>x轴电流</h3>
                <p><input type="text" value="" id="zPosition3" name="zPosition3" /></p>
            </li>

            <li>
                <h4>y轴电流</h4>
                <p><input type="text" value="" id="actFeedrate3" name="actFeedrate3" /></p>
            </li>

            <li>
                <h3>z轴电流</h3>
                <p><input type="text" value="" id="cmdFeedrate3" name="cmdFeedrate3" /></p>
            </li>

            <li>
                <h4>进给倍率</h4>
                <p><input type="text" value="" id="actSpeed3" name="actSpeed3" /></p>
            </li>

            <li>
                <h3>进给速度</h3>
                <p><input type="text" value="" id="cmdSpeed3" name="cmdSpeed3" /></p>
            </li>
            <li>
                <h4>主轴倍率</h4>
                <p><input type="text" value="" id="pro3" name="pro3" /></p>
            </li>
            <li>
                <h3>加工件数</h3>
                <p><input type="text" value="" id="proRow3" name="proRow3" /></p>
            </li>
            <li>
                <h4>主程序名</h4>
                <p><input type="text" value="" id="electric3" name="electric3" /></p>
            </li>
            <li>
                <h3>子程序名</h3>
                <p><input type="text" value="" id="alarm3" name="alarm3" /></p>
            </li>
            <li>
                <h4>指令行号</h4>
                <p><input type="text" value="" id="count3" name="count3" /></p>
            </li>
            <li>
                <h3>报警</h3>
                <p><input type="text" value="" id="leftTogo3" name="leftTogo3" /></p>
            </li>

        </ul>
    </div>



    <div class="box" id="box2">
        <img src="/images/new_machine.jpg"><img>
        <ul>

            <li>
                <tr>
                    <td><h3>机床编号</h3></td>
                    <td><p><input type="text" value="A4" id="machineId4" name="machineId4" /></p></td></tr>
            </li>

            <li>
                <h4>x轴位置</h4>
                <p><input type="text"  id="machineType4" name="machineType4" /></p>
            </li>

            <li>
                <h3>y轴位置</h3>
                <p><input type="text" value="" id="xPosition4" name="xPosition4" /></p>
            </li>
            <li>
                <h4>z轴位置</h4>
                <p><input type="text" value="" id="yPosition4" name="yPosition4" /></p>
            </li>

            <li >
                <h3>x轴电流</h3>
                <p><input type="text" value="" id="zPosition4" name="zPosition4" /></p>
            </li>

            <li>
                <h4>y轴电流</h4>
                <p><input type="text" value="" id="actFeedrate4" name="actFeedrate4" /></p>
            </li>

            <li>
                <h3>z轴电流</h3>
                <p><input type="text" value="" id="cmdFeedrate4" name="cmdFeedrate4" /></p>
            </li>

            <li>
                <h4>进给倍率</h4>
                <p><input type="text" value="" id="actSpeed4" name="actSpeed4" /></p>
            </li>

            <li>
                <h3>进给速度</h3>
                <p><input type="text" value="" id="cmdSpeed4" name="cmdSpeed4" /></p>
            </li>
            <li>
                <h4>主轴倍率</h4>
                <p><input type="text" value="" id="pro4" name="pro4" /></p>
            </li>
            <li>
                <h3>加工件数</h3>
                <p><input type="text" value="" id="proRow4" name="proRow4" /></p>
            </li>
            <li>
                <h4>主程序名</h4>
                <p><input type="text" value="" id="electric4" name="electric4" /></p>
            </li>
            <li>
                <h3>子程序名</h3>
                <p><input type="text" value="" id="alarm4" name="alarm4" /></p>
            </li>
            <li>
                <h4>指令行号</h4>
                <p><input type="text" value="" id="count4" name="count4" /></p>
            </li>
            <li>
                <h3>报警</h3>
                <p><input type="text" value="" id="leftTogo4" name="leftTogo4" /></p>
            </li>

        </ul>
    </div>
</div>

<script>
    var clientid="sadasf"+Math.random();
    client = new Paho.MQTT.Client("192.168.11.15",8083,clientid); //建立客户端实例
    client.connect({
        onSuccess: onConnect,
        userName: "admin",
        password: "public"
    }); //连接服务器并注册连接成功处理事件
    client.onConnectionLost = onConnectionLost; //注册连接断开处理事件
    client.onMessageArrived = onMessageArrived; //注册消息接收处理事件

    function onConnect() {
        console.log("已连接");
        client.subscribe("Sample/1DE04CEC2F708FA/temperature"); //订阅主题
        client.subscribe("Sample/1C36A51AB21089E/temperature");
        client.subscribe("Sample/1C3D1E8436408BD/temperature");
        client.subscribe("Sample/1D4F05E0C0A089C/temperature");

    }
    function onConnectionLost(responseObject) {
        if(responseObject.errorCode !== 0) {
            console.log("连接已断开");
        }
        client.connect({
            onSuccess: onConnect,
            userName: "admin",
            password: "public"
        });

    }
    function onMessageArrived(message) {
        topic = message.destinationName;
        payload = message.payloadString;
        if(payload!="close") {
            var json = JSON.parse(payload);

            var strs = new Array(); //定义一数组
            strs = json.data; //字符分割

            var warning1=new Array();
            warning1=strs[14].data;
            var warning=warning1[0];
            var warn="";
            if(warning.length!=0){
                for(var i=0;i<warning.length;i++){
                    if(i==0){
                        warn=warning[i].text;
                    }else{
                        warn=warn+","+warning[i].text;
                    }

                }
            }
            if (topic == 'Sample/1DE04CEC2F708FA/temperature') {
                var machineType = strs[1].data[0];
                var xPosition = strs[2].data;
                var yPosition = strs[3].data;
                var zPosition = strs[4].data;
                var actFeedrate = strs[5].data;
                var cmdFeedrate = strs[6].data;
                var actSpeed = strs[7].data;
                var cmdSpeed = strs[8].data;
                var pro = strs[9].data;
                var proRow = strs[10].data;
                var electric = strs[11].data;
                var alarm = strs[12].data;
                var count = strs[13].data;
                var leftTogo = warn;

                document.getElementById("machineType1").value = machineType;
                document.getElementById("xPosition1").value = xPosition;
                document.getElementById("yPosition1").value = yPosition;
                document.getElementById("zPosition1").value = zPosition;
                document.getElementById("actFeedrate1").value = actFeedrate;
                document.getElementById("cmdFeedrate1").value = cmdFeedrate;
                document.getElementById("actSpeed1").value = actSpeed;
                document.getElementById("cmdSpeed1").value = cmdSpeed;
                document.getElementById("pro1").value = pro;
                document.getElementById("proRow1").value = proRow;
                document.getElementById("electric1").value = electric;
                document.getElementById("alarm1").value = alarm;
                document.getElementById("count1").value = count;
                document.getElementById("leftTogo1").value = leftTogo;

            }
            if (topic == 'Sample/1C36A51AB21089E/temperature') {
                var machineType = strs[1].data;
                var xPosition = strs[2].data;
                var yPosition = strs[3].data;
                var zPosition = strs[4].data;
                var actFeedrate = strs[5].data;
                var cmdFeedrate = strs[6].data;
                var actSpeed = strs[7].data;
                var cmdSpeed = strs[8].data;
                var pro = strs[9].data;
                var proRow = strs[10].data;
                var electric = strs[11].data;
                var alarm = strs[12].data;
                var count = strs[13].data;
                var leftTogo = warn;
                document.getElementById("machineType2").value = machineType;
                document.getElementById("xPosition2").value = xPosition;
                document.getElementById("yPosition2").value = yPosition;
                document.getElementById("zPosition2").value = zPosition;
                document.getElementById("actFeedrate2").value = actFeedrate;
                document.getElementById("cmdFeedrate2").value = cmdFeedrate;
                document.getElementById("actSpeed2").value = actSpeed;
                document.getElementById("cmdSpeed2").value = cmdSpeed;
                document.getElementById("pro2").value = pro;
                document.getElementById("proRow2").value = proRow;
                document.getElementById("electric2").value = electric;
                document.getElementById("alarm2").value = alarm;
                document.getElementById("count2").value = count;
                document.getElementById("leftTogo2").value = leftTogo;

            }
            if (topic == 'Sample/1C3D1E8436408BD/temperature') {
                var machineType = strs[1].data;
                var xPosition = strs[2].data;
                var yPosition = strs[3].data;
                var zPosition = strs[4].data;
                var actFeedrate = strs[5].data;
                var cmdFeedrate = strs[6].data;
                var actSpeed = strs[7].data;
                var cmdSpeed = strs[8].data;
                var pro = strs[9].data;
                var proRow = strs[10].data;
                var electric = strs[11].data;
                var alarm = strs[12].data;
                var count = strs[13].data;
                var leftTogo = warn;
                document.getElementById("machineType3").value = machineType;
                document.getElementById("xPosition3").value = xPosition;
                document.getElementById("yPosition3").value = yPosition;
                document.getElementById("zPosition3").value = zPosition;
                document.getElementById("actFeedrate3").value = actFeedrate;
                document.getElementById("cmdFeedrate3").value = cmdFeedrate;
                document.getElementById("actSpeed3").value = actSpeed;
                document.getElementById("cmdSpeed3").value = cmdSpeed;
                document.getElementById("pro3").value = pro;
                document.getElementById("proRow3").value = proRow;
                document.getElementById("electric3").value = electric;
                document.getElementById("alarm3").value = alarm;
                document.getElementById("count3").value = count;
                document.getElementById("leftTogo3").value = leftTogo;

            }
            if (topic == 'Sample/1D4F05E0C0A089C/temperature') {
                var machineType = strs[1].data;
                var xPosition = strs[2].data;
                var yPosition = strs[3].data;
                var zPosition = strs[4].data;
                var actFeedrate = strs[5].data;
                var cmdFeedrate = strs[6].data;
                var actSpeed = strs[7].data;
                var cmdSpeed = strs[8].data;
                var pro = strs[9].data;
                var proRow = strs[10].data;
                var electric = strs[11].data;
                var alarm = strs[12].data;
                var count = strs[13].data;
                var leftTogo = strs[14].data;
                document.getElementById("machineType4").value = machineType;
                document.getElementById("xPosition4").value = xPosition;
                document.getElementById("yPosition4").value = yPosition;
                document.getElementById("zPosition4").value = zPosition;
                document.getElementById("actFeedrate4").value = actFeedrate;
                document.getElementById("cmdFeedrate4").value = cmdFeedrate;
                document.getElementById("actSpeed4").value = actSpeed;
                document.getElementById("cmdSpeed4").value = cmdSpeed;
                document.getElementById("pro4").value = pro;
                document.getElementById("proRow4").value = proRow;
                document.getElementById("electric4").value = electric;
                document.getElementById("alarm4").value = alarm;
                document.getElementById("count4").value = count;
                document.getElementById("leftTogo4").value = warn;

            }
        }
    }


        $(function () {
            var t = null;
            t = setTimeout(time, 1000);//開始运行
            function time() {
                clearTimeout(t);//清除定时器
                dt = new Date();
                var year = dt.getFullYear();
                var month = dt.getMonth() + 1;//(0-11,0代表1月)
                var date = dt.getDate();//获取天
                var num = dt.getDay();//获取星期
                var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
                var hour = dt.getHours();//获取时
                var minute = dt.getMinutes();//获取分
                var second = dt.getSeconds();//获取秒
                //分秒时间是一位数字，在数字前补0。
                date = extra(date);
                month = extra(month);
                minute = extra(minute);
                second = extra(second);
                document.getElementById("start").innerHTML = year + " 年 " + month + " 月 " + date + " 日 " + hour + "：" + minute + "：" + second + " " + weekday[num];
                t = setTimeout(time, 1000); //设定定时器，循环运行
            }

        });
        //补位函数。
        function extra(x) {
            //如果传入数字小于10，数字前补一位0。
            if (x < 10) {
                return "0" + x;
            }
            else {
                return x;
            }
        }

</script>
</body>

</html>

